<!-- 首页index.php -->
<!DOCTYPE html>
<html>
<?php
session_start();
require 'connection.php';
$conn = Connect();
?>

<style>
    /* 手风琴 */

    .window-shades main {
        width: 100vw;
        height: 600px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .window-shades main {
        width: 95vw;
        height: 600px;
        display: flex;
    }

    .window-shades main div {
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        margin: 0 5px;
        overflow: hidden;
        border-radius: 50px;
        box-shadow: 5px 5px 10px rgb(193, 193, 193);
    }

    .window-shades main div p {
        white-space: nowrap;
        overflow: hidden;
        word-wrap: normal;
    }

    .window-shades .unactive {
        flex: 1;
        transition: .5s;
    }

    .window-shades .active {
        flex: 10;
        transition: .5s;
    }

    .window-shades .unactive p,
    .window-shades .active p {
        position: relative;
        color: #fff;
        left: 50px;
    }

    .window-shades .unactive p {
        top: 620px;
        transition: .5s;
    }

    .window-shades .active p {
        top: 540px;
        transition: .5s;
    }
</style>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>租车服务</title>
    <link rel="shortcut icon" type="image/png" href="assets/img/P.png">

    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/user.css">
    <!-- 字体 -->
    <link rel="stylesheet" href="assets/w3css/w3.css">

</head>

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

    <!-- 导航栏 -->
    <?php
    include './nav.php';
    ?>

    <!-- 首页背景 -->

    <div class="bgimg-1">
        <header class="intro">
            <div class="intro-body">
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                            <h1 class="brand-heading" style="color: black">租车服务</h1>
                            <p class="intro-text">
                                在线租车服务
                            </p>
                            <a href="#sec2" class="btn btn-circle page-scroll blink">
                                <i class="fa fa-angle-double-down animated"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    </div>

    <!-- 可用车辆 -->
    <div id="sec2" style="color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: justify;" class="bgimg-2">
        <h3 style="text-align:center;">可用车辆</h3>
        <br>
        <section class="menu-content">
            <?php
            $sql1 = "SELECT * FROM cars WHERE car_availability='yes'"; // 查询所有可用车辆
            $result1 = mysqli_query($conn, $sql1); // 执行查询语句

            if (mysqli_num_rows($result1) > 0) { // 如果有可用车辆的记录
                while ($row1 = mysqli_fetch_assoc($result1)) { // 遍历查询结果的每一行
                    $car_id = $row1["car_id"]; // 车辆ID
                    $car_name = $row1["car_name"]; // 车辆名称
                    $ac_price = $row1["ac_price"]; // 空调价格
                    $ac_price_per_day = $row1["ac_price_per_day"]; // 空调每日价格
                    $non_ac_price = $row1["non_ac_price"]; // 非空调价格   经济型
                    $non_ac_price_per_day = $row1["non_ac_price_per_day"]; // 非空调每日价格  豪华型
                    $car_img = $row1["car_img"]; // 车辆图片的路径

            ?>
                    <a href="booking.php?id=<?php echo ($car_id) ?>"> <!-- 跳转到预订页面，传递车辆ID作为参数 -->
                        <div class="sub-menu">
                            <img class="card-img-top" src="<?php echo $car_img; ?>" alt="Card image cap"> <!-- 车辆图片 -->
                            <h5><b> <?php echo $car_name; ?> </b></h5> <!-- 车辆名称 -->
                            <h6> 经济型价格: <?php echo ("Rs. " . $ac_price . "/km & Rs." . $ac_price_per_day . "/day"); ?></h6> <!-- 空调价格信息 -->
                            <h6> 豪华型价格: <?php echo ("Rs. " . $non_ac_price . "/km & Rs." . $non_ac_price_per_day . "/day"); ?></h6> <!-- 非空调价格信息 -->
                        </div>
                    </a>
                <?php }
            } else { // 如果没有可用车辆
                ?>
                <h1> 没有可用车辆 :( </h1> <!-- 显示没有可用车辆的消息 -->
            <?php
            }
            ?>
        </section>
    </div>


    <!-- 手风琴-->
    <h3 style="text-align:center;">品牌优势</h3>
    <br>
    <div class="window-shades">

        <div class="caption">
            <span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;"></span>
        </div>
        <main></main>


    </div>

    <!-- 底部 -->
    <footer class="site-footer">
        <div class="container">
            <hr>
            <div class="row">
                <div class="col-sm-6">
                    <h5>© <?php echo date("Y"); ?> 租车服务</h5>
                </div>
            </div>
        </div>
    </footer>


    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>

    <!--  Theme js -->
    <script src="assets/js/theme.js"></script>




    <!-- 手风琴部分 -->
    <script>
        // 在页面加载完成后，$(document).ready()函数被触发。
        $(document).ready(function() {
            // 从JSON数据加载图片的函数
            function loadImages(data) {
                for (let i = 0; i < 6; i++) {
                    $('main').append('<div style="background-image:url(' + "'" +
                        "" + data.images[i].url + "' )" + '"><p>' + data
                        .images[i].copyright + "</p></div>");
                }
                $('main div').addClass('unactive');
                $('main div').eq(0).removeClass('unactive');
                $('main div').eq(0).addClass('active');
            }

            // 直接更换初始加载的图片
            $.ajax({
                type: "GET",
                url: "./json/images_list.json", // JSON文件路径
                dataType: "json",
                success: function(newData) {
                    loadImages(newData);
                }
            });

            // 点击时更换图片
            $('main').on("click", "div", function() {
                $('main div').addClass('unactive');
                $('main div').removeClass('active');
                $(this).removeClass('unactive');
                $(this).addClass('active');
            });
        });
    </script>
</body>

</html>